<template>
    <view class="navbar" :class="[theme]" :style="navbarStyle">
        <view class="menu-button-placeholder" :style="menuButtonPlaceholderStyle"></view>

        <view class="right">
            <slot name="right"></slot>
        </view>

        <view class="title">
            {{ title }}
        </view>

        <view class="left" :style="leftStyle">
            <slot name="left"></slot>

            <view class="navbar-btn" v-if="!hideBack" @click="back">
                <image class="icon" :src="`/static/navbar/arrow_${theme}.png`" mode="scaleToFill" />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    options: {
        virtualHost: true
    }
}
</script>

<script setup>
import { computed, inject } from 'vue'

import { back } from '@/hooks/action'

const theme = inject('theme')

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    hideBack: {
        type: Boolean,
        default: false
    }
})

const navbarStyle = computed(() => {
    const screenWidth = uni.getSystemInfoSync().screenWidth
    return {
        paddingTop: `${menuButtonRect.value.top}px`,
        paddingRight: `${screenWidth - menuButtonRect.value.right}px`
    }
})

const menuButtonRect = computed(() => uni.getMenuButtonBoundingClientRect())

const menuButtonPlaceholderStyle = computed(() => ({
    width: `${menuButtonRect.value.width}px`,
    height: `${menuButtonRect.value.height}px`
}))

const leftStyle = computed(() => {
    return {
        minWidth: `${menuButtonRect.value.width}px`
    }
})
</script>

<style lang="scss" scoped>
.navbar {
    display: flex;
    flex-shrink: 0;
    min-height: 0;
    padding: 0 38.17rpx;

    .menu-button-placeholder {
        flex-shrink: 0;
        min-width: 0;
    }

    .title {
        flex: 1;
        color: #101318;
        font-size: 41.98rpx;
        text-align: center;
    }

    .right,
    .left {
        display: flex;
        flex-shrink: 0;
        min-width: 0;
    }

    .left {
        justify-content: flex-end;
    }

    .navbar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15.27rpx;

        .icon {
            width: 38.17rpx;
            height: 38.17rpx;
        }
    }

    &.dark {
        .title {
            color: rgba(255, 255, 255, 0.4);
        }
    }
}
</style>